<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>better-files</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script id="template" type="text/x-handlebars-template">
  <ul id="scalaVersions" class="nav nav-pills" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">better-files</button>
    </li>
    {{#each scalaVersions}}
    <li class="nav-item" role="presentation">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#scala-{{this}}" type="button" role="tab" aria-controls="scala-{{this}}" aria-selected="true">Scala {{this}}</button>
    </li>
    {{/each}}
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby=home" tabindex="0">
      <p class="lead">You can find Scaladoc for all Scala version by clicking above</p>
    </div>
    {{#each scalaVersions}}
    <div class="tab-pane fade show" id="scala-{{this}}" role="tabpanel" aria-labelledby="scala-{{this}}" tabindex="0">
      <div class="ratio ratio-1x1"><iframe src="api/{{this}}/better/files/File.html"></iframe></div>
    </div>
    {{/each}}
  </div>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>
<script>
  const template = Handlebars.compile($('#template').html());
  const context = {
    scalaVersions: [@scalaVersions@]
  };
  $('#template').replaceWith(template(context));
</script>
</body>
</html>
